<!--
 * @Author       : ionluo(2437403125@qq.com)
 * @Description  :
 * @Date         : 2024-08-15 20:13:58
-->

<template>
  <div class="echarts" ref="echartsRef"></div>
</template>

<script>
import Echarts from 'echarts'

export default {
  props: {
    options: {
      type: Object
    },
    theme: {
      type: [String, Object],
      default: 'dark'
    }
  },
  data () {
    return {}
  },
  watch: {
    options: {
      handler (newVal, oldVal) {
        console.log('options changed', newVal, oldVal)
        this.echart || this.initChart()
      },
      deep: true
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      // this.chart 不能放到 script 下层，会导致多个echarts组件实例共用一个charts对象
      this.chart = Echarts.init(this.$refs.echartsRef)
      this.chart.setOption(this.options, this.theme)
    }
  }
}
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
